﻿<div id="app" class="common-layout" style="max-width: max-content;">
    <div id="tableBlock">
        <!-- 查询区域 -->
        <div class="search-area">
            <div class="search-row">
                <div class="search-item">
                    <label>货品：</label>
                    <el-input type="text" v-model="searchForm.goodsName" class="formTableInput" placeholder="请输入货品名称/编号"></el-input>
                </div>
                <!-- 替换原有的仓库选择下拉框 -->
                <div class="search-item">
                    <label>仓库：</label>
                    <el-cascader v-model="searchForm.warehouseLocation"
                                 class="formTableSelect"
                                 placeholder="请选择仓库/库位"
                                 :options="warehouseLocationOptions"
                                 :props="{ expandTrigger: 'hover', label: 'name', value: 'id', children: 'children' }"
                                 clearable>
                    </el-cascader>
                </div>
                <!-- 查询区域中的货品类型选择器 -->
                <div class="search-item">
                    <label>货品类型：</label>
                    <el-cascader v-model="searchForm.goodsTypeId"
                                 class="formTableSelect"
                                 placeholder="请选择货品类型"
                                 :options="goodsTypeTree"
                                 :props="cascaderProps"
                                 clearable
                                 style="width: 180px;">
                    </el-cascader>
                </div>
                <el-button type="default" v-on:click="resetForm">重置</el-button>
                <el-button type="primary" v-on:click="searchTable">查询</el-button>
            </div>
            <!-- 操作按钮区域 -->
            <div class="buttonBlock">
                <el-button type="primary" v-on:click="addGoods">新增</el-button>
                <el-button type="default" v-on:click="editGoods">编辑</el-button>
                <el-button type="default" v-on:click="deleteGoods">删除</el-button>
                <el-button type="default" v-on:click="copyGoods">复制</el-button>
                <el-button type="default" v-on:click="exportTable">导出</el-button>
                <el-button type="default" v-on:click="importGoods">导入</el-button>
                <el-button type="success" v-on:click="refreshTable">刷新</el-button>
            </div>
        </div>

        <!-- 表格区域 -->
        <div class="btnAndTable">
            <el-table :data="paginatedData"
                      style="width: 100%; margin-top: 10px"
                      v-on:selection-change="handleSelectionChange"
                      ref="multipleTable"
                      stripe
                      border>
                <el-table-column fixed type="selection" width="50"></el-table-column>
                <el-table-column fixed label="货品编号" width="150">
                    <template #default="scope">
                        <span style="color: #10b981; cursor: pointer;" v-on:click="jumpToDetail(scope.row)">
                            <span v-html="highlightText(scope.row.goodsCode, searchForm.goodsName)"></span>
                        </span>
                    </template>
                </el-table-column>
                <el-table-column fixed prop="goodsName" label="货品名称" width="180">
                    <template #default="scope">
                        <span v-html="highlightText(scope.row.goodsName, searchForm.goodsName)"></span>
                    </template>
                </el-table-column>
                <el-table-column fixed prop="status" label="状态" width="100">
                    <template #default="scope">
                        <span :class="['status-tag', getStatusClass(parseInt(scope.row.status))]">
                            {{ getStatusText(parseInt(scope.row.status)) }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="goodsTypeName" label="货品类型" width="100">
                    <template #default="scope">
                        <span v-html="highlightGoodsType(scope.row.goodsTypeName, searchForm.goodsTypeId)"></span>
                    </template>
                </el-table-column>
                <el-table-column prop="specification" label="规格型号" width="120"></el-table-column>
                <el-table-column prop="supplierName" label="供应商" width="180">
                    <template #default="scope">
                        <span v-html="highlightText(scope.row.supplierName, searchForm.goodsName)"></span>
                    </template>
                </el-table-column>
                <el-table-column prop="customerName" label="客户名称" width="150">
                    <template #default="scope">
                        <span v-html="highlightText(scope.row.customerName, searchForm.contact)"></span>
                    </template>
                </el-table-column>
                <el-table-column prop="purchaseReferencePrice" label="入库参考价/元" width="120"></el-table-column>
                <el-table-column prop="salesReferencePrice" label="出库参考价/元" width="120"></el-table-column>
                <el-table-column prop="displayOrder" label="显示顺序" width="80"></el-table-column>
                <el-table-column prop="currentStock" label="当前库存" width="100"></el-table-column>
                <el-table-column prop="warningDays" label="预警天数（天）" width="100"></el-table-column>
                <el-table-column prop="createBy" label="操作人" width="100">
                    <template #default="scope">
                        <span v-html="highlightText(scope.row.createBy, searchForm.contact)"></span>
                    </template>
                </el-table-column>
                <el-table-column prop="shelfLifeType" label="保质期管理" width="100"></el-table-column>
                <el-table-column label="库存总金额" width="120">
                    <template #default="scope">
                        {{ (scope.row.currentStock * scope.row.salesReferencePrice).toFixed(2) || '0.00' }}
                    </template>
                </el-table-column>
                <el-table-column prop="shelfLife" label="保质期" width="80"></el-table-column>
                <el-table-column label="操作时间" width="160">
                    <template #default="scope">
                        {{ formatDateTime(scope.row.updateTime) }}
                    </template>
                </el-table-column>

                <!-- 操作列：按int状态动态显示按钮 -->
                <el-table-column fixed="right" label="操作" min-width="130">
                    <template #default="scope">
                        <!-- 1. 草稿(0)/待审核(1)状态：显示【编辑】【删除】 -->
                        <el-button v-if="parseInt(scope.row.status) === 0 || parseInt(scope.row.status) === 1"
                                   class="operate-btn"
                                   link type="primary" size="default"
                                   v-on:click="handleEdit(scope.row)">
                            编辑
                        </el-button>
                        <el-button v-if="parseInt(scope.row.status) === 0 || parseInt(scope.row.status) === 1"
                                   class="operate-btn"
                                   link type="danger" size="default"
                                   v-on:click="deleteSingleGoods(scope.row)">
                            删除
                        </el-button>

                        <!-- 2. 已驳回(2)状态：显示【编辑】【撤销】 -->
                        <el-button v-if="parseInt(scope.row.status) === 2"
                                   class="operate-btn"
                                   link type="primary" size="default"
                                   v-on:click="handleEdit(scope.row)">
                            编辑
                        </el-button>
                        <el-button v-if="parseInt(scope.row.status) === 2"
                                   class="operate-btn"
                                   link type="warning" size="default"
                                   v-on:click="handleRejectCancel(scope.row)">
                            撤销
                        </el-button>

                        <!-- 3. 正常(3)状态：显示【停用】 -->
                        <el-button v-if="parseInt(scope.row.status) === 3"
                                   class="operate-btn"
                                   link type="warning" size="default"
                                   v-on:click="disableGoods(scope.row)">
                            停用
                        </el-button>

                        <!-- 4. 停用(4)状态：显示【启用】 -->
                        <el-button v-if="parseInt(scope.row.status) === 4"
                                   class="operate-btn"
                                   link type="success" size="default"
                                   v-on:click="enableGoods(scope.row)">
                            启用
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 分页区域 -->
        <div class="pagination-container">
            <el-pagination v-model:current-page="currentPage"
                           v-model:page-size="pageSize"
                           :page-sizes="[10, 20, 50, 100]"
                           :total="filteredData.length"
                           layout="total, sizes, prev, pager, next, jumper"
                           v-on:size-change="handleSizeChange"
                           v-on:current-change="handleCurrentChange">
            </el-pagination>
        </div>
    </div>
</div>

<script>
    const { createApp, ref, onMounted, computed } = Vue;
    const { ElMessageBox, ElMessage, ElNotification } = ElementPlus;

    // 状态映射配置：int值 -> 文字说明 -> 样式类
    const STATUS_CONFIG = {
        0: { text: '正常', class: 'status-normal' },
        1: { text: '停用', class: 'status-disabled' }
    };

    const app = createApp({
        setup() {

            // ---------- 级联选择器配置 ----------
            const cascaderProps = {
                value: 'id',
                label: 'name',
                children: 'children',
                checkStrictly: false,
                emitTrigger: 'hover'
            };

           // ---------- 货品类型树形数据 ----------
            const goodsTypeTree = ref([]);

            // ---------- 构建树形结构函数 ----------
            const buildTree = (data) => {
                const map = {};
                const tree = [];

                // 首先创建所有节点的映射
                data.forEach(item => {
                    map[item.id] = {
                        id: item.id,
                        name: item.name,
                        fId: item.fId,
                        children: []
                    };
                });

                // 然后构建树形结构
                data.forEach(item => {
                    const node = map[item.id];
                    const parent = map[item.fId];

                    if (parent) {
                        // 如果找到父节点，添加到父节点的children中
                        parent.children.push(node);
                    } else {
                        // 如果没有父节点（或者父节点不在当前数据中），作为根节点
                        tree.push(node);
                    }
                });

                return tree;
            };

            // ---------- 加载货品类型数据 ----------
            const loadGoodsTypeData = async () => {
                try {
                    const typeRes = await axios.post('/BiProduct/ProductTypeAllync');
                    if (typeRes.data.code === 200) {
                        goodsTypeTree.value = buildTree(typeRes.data.data);
                    } else {
                        ElMessage.error('加载货品类型失败：' + typeRes.data.msg);
                    }
                } catch (error) {
                    console.error('加载货品类型数据失败：', error);
                    ElMessage.error('加载货品类型数据失败');
                }
            };

            // -------------------------- 1. 基础数据初始化 --------------------------
            // 原始数据备份
            const originalData = ref([]);

            // 初始化加载数据
            const refreshData = async () => {
                try {
                    const response = await axios.post('/BiProduct/GetAll');
                    if (response.data.code === 200) {
                        originalData.value = response.data.data.result;
                        tableData.value = [...originalData.value];
                        ElMessage.success('货品信息数据加载成功');
                    }
                } catch (error) {
                    console.error('加载出错:', error);
                    ElMessage.error('数据加载失败，请重试');
                }
            };

            // 搜索表单
            const searchForm = ref({
                goodsName: '',
                warehouseLocation: [],
                goodsTypeId: [],
                contact: ''
            });

            // 表格数据
            const tableData = ref([]);

            // 选中行数据
            const selectedRows = ref([]);
            // 表格实例
            const multipleTable = ref(null);

            // -------------------------- 2. 分页逻辑 --------------------------
            const currentPage = ref(1);
            const pageSize = ref(10);

            // 过滤后的数据
            const filteredData = computed(() => {
                let result = tableData.value;

                // 货品名称/编号模糊查询
                if (searchForm.value.goodsName) {
                    const keyword = searchForm.value.goodsName.toLowerCase();
                    result = result.filter(item =>
                        (item.goodsName && item.goodsName.toLowerCase().includes(keyword)) ||
                        (item.goodsCode && item.goodsCode.toLowerCase().includes(keyword)) ||
                        (item.supplierName && item.supplierName.toLowerCase().includes(keyword))
                    );
                }

                // 仓库库位查询
                if (searchForm.value.warehouseLocation && searchForm.value.warehouseLocation.length > 0) {
                    const selectedWarehouseId = searchForm.value.warehouseLocation[0];
                    result = result.filter(item => item.warehouseId === selectedWarehouseId);
                }

                // 货品类型查询 - 修改为基于文字查询
                if (searchForm.value.goodsTypeId && searchForm.value.goodsTypeId.length > 0) {
                    const selectedTypeName = getSelectedTypeName(searchForm.value.goodsTypeId);
                    if (selectedTypeName) {
                        result = result.filter(item =>
                            item.goodsTypeName && item.goodsTypeName.includes(selectedTypeName)
                        );
                    }
                }

                // 联系人查询
                if (searchForm.value.contact) {
                    const contactKeyword = searchForm.value.contact.toLowerCase();
                    result = result.filter(item =>
                        (item.customerName && item.customerName.toLowerCase().includes(contactKeyword)) ||
                        (item.createBy && item.createBy.toLowerCase().includes(contactKeyword))
                    );
                }

                return result;
            });

            // 货品类型高亮显示
            const highlightGoodsType = (text, selectedTypePath) => {
                if (!text || !selectedTypePath || selectedTypePath.length === 0) return text;

                // 获取选中的类型名称
                const selectedTypeName = getSelectedTypeName(selectedTypePath);
                if (!selectedTypeName) return text;

                const str = String(text);
                const key = String(selectedTypeName);

                // 创建正则表达式，忽略大小写
                const regex = new RegExp(`(${key.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
                return str.replace(regex, '<span class="highlight-text">$1</span>');
            };

           // 获取选中类型的名称
            const getSelectedTypeName = (typePath) => {
                if (!typePath || typePath.length === 0) return '';

                let currentNode = goodsTypeTree.value;
                let typeName = '';

                // 遍历路径找到最后一级节点
                for (let i = 0; i < typePath.length; i++) {
                    const nodeId = typePath[i];
                    const foundNode = currentNode.find(node => node.id === nodeId);

                    if (foundNode) {
                        typeName = foundNode.name;
                        if (foundNode.children && i < typePath.length - 1) {
                            currentNode = foundNode.children;
                        }
                    } else {
                        break;
                    }
                }

                return typeName;
            };

            const total = computed(() => filteredData.value.length);
            const paginatedData = computed(() => {
                const start = (currentPage.value - 1) * pageSize.value;
                const end = start + pageSize.value;
                return filteredData.value.slice(start, end);
            });

            const handleSizeChange = (val) => {
                pageSize.value = val;
                currentPage.value = 1;
            };

            const handleCurrentChange = (val) => {
                currentPage.value = val;
                if (multipleTable.value) {
                    multipleTable.value.clearSelection();
                    selectedRows.value = [];
                }
            };

            // -------------------------- 3. 关键字高亮方法 --------------------------
            const highlightText = (text, keyword) => {
                if (!text) return '';
                if (!keyword) return text;

                const str = String(text);
                const key = String(keyword);

                // 创建正则表达式，忽略大小写
                const regex = new RegExp(`(${key.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
                return str.replace(regex, '<span class="highlight-text">$1</span>');
            };

            // -------------------------- 4. 状态转换辅助方法 --------------------------
            // 根据状态int值获取显示文字
            const getStatusText = (status) => {
                return STATUS_CONFIG[status]?.text || '未知状态';
            };

            // 根据状态int值获取样式类
            const getStatusClass = (status) => {
                return STATUS_CONFIG[status]?.class || '';
            };

            // -------------------------- 5. 核心操作方法 --------------------------
            // 5.1 选中行变化
            const handleSelectionChange = (val) => {
                selectedRows.value = val;
            };

            // 5.2 编辑（仅草稿0/待审核1/已驳回2可执行）
            const handleEdit = (row) => {
                // 二次校验状态
                const allowEditStatus = [0, 1, 2];
                if (!allowEditStatus.includes(parseInt(row.status))) {
                    ElMessage({
                        type: 'error',
                        message: `当前「${getStatusText(parseInt(row.status))}」状态不允许编辑！`
                    });
                    return;
                }else{
                    ElNotification({
                        title: '编辑货品',
                        message: `编辑货品：${row.goodsName}`,
                        type: 'info'
                    });
                window.location.href = `/BiProduct/Edit?id=${row.goodsId}`;
                }
            };

            // 5.3 单行删除（仅草稿0/待审核1可执行）
            const deleteSingleGoods = (row) => {
                // 二次校验状态
                if (parseInt(row.status) !== 0 && parseInt(row.status) !== 1) {
                    ElMessage({
                        type: 'error',
                        message: `当前「${getStatusText(parseInt(row.status))}」状态不允许删除！`
                    });
                    return;
                }
                ElMessageBox.confirm(
                    `确定删除货品 "${row.goodsName}" 吗？删除后不可恢复！`,
                    '警告',
                    { type: 'error' }
                ).then(() => {
                    tableData.value = tableData.value.filter(item => item.goodsCode !== row.goodsCode);
                    ElMessage({ type: 'success', message: '删除成功！' });
                }).catch(() => {
                    ElMessage({ type: 'info', message: '已取消删除' });
                });
            };

            //撤销操作
            const handleRejectCancel = (row) => {
                // 二次校验状态
                if (parseInt(row.status) !== 2) {
                    ElMessage({
                        type: 'error',
                        message: `当前「${getStatusText(parseInt(row.status))}」状态不允许撤销！`
                    });
                    return;
                }
                ElMessageBox.confirm(
                    `确定撤销驳回状态，将货品"${row.goodsName}"恢复为「」吗？`,
                    '确认撤销',
                    { type: 'warning' }
                ).then(() => {
                    row.status = '1';
                    ElMessage({ type: 'success', message: '撤销成功！' });
                }).catch(() => {
                    ElMessage({ type: 'info', message: '已取消撤销' });
                });
            };

            // 5.5 停用货品（仅正常3可执行）
            const disableGoods =  (row) => {
                ElMessageBox.confirm(
                    `确定停用货品"${row.goodsName}"吗？`,
                    '确认停用',
                    { type: 'warning' }
                ).then(() => {
                     axios.post(`/BiProduct/Status?status=1&id=${row.goodsId}`)
                    ElMessage({ type: 'success', message: '货品已停用！' });
                }).catch(() => {
                    ElMessage({ type: 'info', message: '已取消停用' });
                });
            };

            // 5.6 启用货品（仅停用4可执行）
            const enableGoods = (row) => {
                ElMessageBox.confirm(
                    `确定启用货品"${row.goodsName}"吗？`,
                    '确认启用',
                    { type: 'info' }
                ).then(() => {
                     axios.post(`/BiProduct/Status?status=0&id=${row.goodsId}`)
                    ElMessage({ type: 'success', message: '货品已启用！' });
                }).catch(() => {
                    ElMessage({ type: 'info', message: '已取消启用' });
                });
            };

            // 5.7 批量删除（仅草稿0/待审核1可执行）
            const deleteGoods = () => {
                if (selectedRows.value.length === 0) {
                    ElMessage({ type: 'warning', message: '请先选中需要删除的货品！' });
                    return;
                }
                // 筛选可删除的货品（状态0或1）
                const canDeleteRows = selectedRows.value.filter(row =>
                    parseInt(row.status) === 0 || parseInt(row.status) === 1
                );
                if (canDeleteRows.length === 0) {
                    ElMessage({ type: 'error', message: '仅「停用」状态的货品可删除！' });
                    return;
                }
                const deleteIds = canDeleteRows.map(row => row.goodsCode).join(',');
                ElMessageBox.confirm(
                    `确定删除选中的 ${canDeleteRows.length} 条货品吗？`,
                    '警告',
                    { type: 'error' }
                ).then(() => {
                    tableData.value = tableData.value.filter(row => !deleteIds.includes(row.goodsCode));
                    ElMessage({ type: 'success', message: '删除成功！' });
                    selectedRows.value = [];
                }).catch(() => {
                    ElMessage({ type: 'info', message: '已取消删除' });
                });
            };

            // -------------------------- 6. 查询相关方法 --------------------------
            // 查询方法
            const searchTable = () => {
                currentPage.value = 1;
                ElMessage({
                    type: 'success',
                    message: `查询到 ${filteredData.value.length} 条数据！`
                });
            };

            // 重置表单
            const resetForm = () => {
                searchForm.value = {
                    goodsName: '',
                    warehouseLocation: [],
                    goodsTypeId: [], // 重置为数组
                    contact: ''
                };
                tableData.value = [...originalData.value];
                currentPage.value = 1;
                ElMessage({ type: 'success', message: '查询条件已重置！' });
            };


            // -------------------------- 7. 其他辅助方法 --------------------------
            // 日期格式化
            const formatDateTime = (date) => {
                if (!date) return '';
                const dt = new Date(date);
                const year = dt.getFullYear();
                const month = String(dt.getMonth() + 1).padStart(2, '0');
                const day = String(dt.getDate()).padStart(2, '0');
                const hours = String(dt.getHours()).padStart(2, '0');
                const minutes = String(dt.getMinutes()).padStart(2, '0');
                const seconds = String(dt.getSeconds()).padStart(2, '0');
                return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
            };

            // 货品编号点击跳转页面
            const jumpToDetail = (row) => {
                // 携带货品编号参数
                ElMessage({ type: 'info', message: `跳转至货品${row.goodsCode}的详情页` });
                window.location.href = `/BiProduct/Details?id=${row.goodsId}&pwd=114514`;
            };

            // 导出
            const exportTable = () => {
                ElMessage({ type: 'success', message: '导出请求已触发，正在下载...' });
            };

            // 刷新
            const refreshTable = () => {
                if (multipleTable.value) {
                    multipleTable.value.clearSelection();
                    selectedRows.value = [];
                }
                currentPage.value = 1;
                refreshData(); // 重新加载数据
                ElMessage({ type: 'success', message: '表格已刷新！' });
            };

            // 新增
            const addGoods = () => {
                ElNotification({ title: '提示', message: '跳转至新增货品页面', type: 'info' });
                window.location.href = '/BiProduct/Create';
            };

            // 复制
            const copyGoods = () => {
                if (selectedRows.value.length === 0) {
                    ElMessage({ type: 'warning', message: '请先选中需要复制的货品！' });
                    return;
                }
                if (selectedRows.value.length > 1) {
                    ElMessage({ type: 'warning', message: '仅支持单条货品复制！' });
                    return;
                }
                const targetRow = selectedRows.value[0];
                ElNotification({ title: '复制货品', message: `开始复制货品：${targetRow.goodsName}`, type: 'info' });
            };

            // 编辑（批量选择）
            const editGoods = () => {
                if (selectedRows.value.length === 0) {
                    ElMessage({ type: 'warning', message: '请先选中需要编辑的货品！' });
                    return;
                }
                if (selectedRows.value.length > 1) {
                    ElMessage({ type: 'warning', message: '仅支持单条货品编辑！' });
                    return;
                }
                const targetRow = selectedRows.value[0];
                handleEdit(targetRow);
            };

            // 导入
            const importGoods = () => {
                ElNotification({ title: '导入货品', message: '打开货品导入窗口', type: 'info' });
            };

            // 仓库库位数据
            const warehouseLocationOptions = ref([]);

            // 加载仓库和库位数据
            const loadWarehouseLocationData = async () => {
                try {
                    // 获取仓库列表
                    const warehouseRes = await axios.post('/BiProduct/WhAll');
                    if (warehouseRes.data.code === 200) {
                        const warehouses = warehouseRes.data.data;
                        warehouseLocationOptions.value = warehouses.map(wh => ({
                            id: wh.warehouseId,
                            name: wh.warehouseName,
                            children: wh.children || []
                        }));
                    }
                } catch (error) {
                    console.error('加载仓库库位数据失败：', error);
                    ElMessage.error('加载仓库库位数据失败');
                }
            };

            // 在onMounted中调用加载货品类型数据
            onMounted(() => {
                refreshData();
                loadWarehouseLocationData();
                loadGoodsTypeData(); // 新增：加载货品类型数据
            });

            // 暴露数据和方法
            return {
                // 新增的货品类型相关
                goodsTypeTree,
                cascaderProps,
                loadGoodsTypeData,
                highlightGoodsType,
                getSelectedTypeName,
                searchForm,
                tableData,
                paginatedData,
                filteredData,
                selectedRows,
                multipleTable,
                handleSelectionChange,
                handleEdit,
                deleteSingleGoods,
                handleRejectCancel,
                disableGoods,
                enableGoods,
                getStatusText,
                getStatusClass,
                highlightText,
                currentPage,
                pageSize,
                total,
                handleSizeChange,
                handleCurrentChange,
                addGoods,
                editGoods,
                deleteGoods,
                copyGoods,
                importGoods,
                exportTable,
                refreshTable,
                resetForm,
                searchTable,
                formatDateTime,
                jumpToDetail,
                warehouseLocationOptions
            };
        }
    });
    app.use(ElementPlus, {
        locale: ElementPlusLocaleZhCn
    });
    app.mount('#app');
</script>
<style>
    body {
        margin: 0;
        padding: 0;
        font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
        background-color: #f5f7fa;
    }

    #tableBlock {
        margin: 20px auto;
        width: 100%;
        max-width: max-content;
        padding-bottom: 20px;
        box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.1);
        background-color: #fff;
        border-radius: 6px;
    }

    .search-area {
        padding: 20px;
        border-bottom: 0px solid #ebeef5;
    }

    .formTableInput, .formTableSelect {
        display: inline-block;
        width: 180px;
    }

    .buttonBlock {
        height: 40px;
        width: 100%;
        padding: 20px;
        gap: 10px;
        margin-bottom: 15px;
        flex-wrap: wrap;
    }

    .pagination-container {
        margin-top: 20px;
        display: flex;
        justify-content: flex-end;
        padding: 0 20px;
    }

    .audit-textarea {
        margin-top: 15px;
        width: 100%;
    }

    /* 操作列按钮间距 */
    .operate-btn {
        margin-right: 8px;
    }

    .btnAndTable {
        margin: 0 auto;
        padding: 0 20px;
    }

    .search-row {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        margin-bottom: 15px;
    }

    .search-item {
        display: flex;
        align-items: center;
    }

        .search-item label {
            min-width: 80px;
            text-align: right;
            margin-right: 10px;
        }

    /* 状态标签样式 */
    .status-tag {
        padding: 2px 6px;
        border-radius: 4px;
        font-size: 12px;
    }

    .status-draft {
        background-color: #f5f5f5;
        color: #606266;
    }

    .status-pending {
        background-color: #ffe58f;
        color: #ad6800;
    }

    .status-rejected {
        background-color: #fef0f0;
        color: #f56c6c;
    }

    .status-normal {
        background-color: #f0f9eb;
        color: #67c23a;
    }

    .status-disabled {
        background-color: #f5f7fa;
        color: #c0c4cc;
    }

    /* 关键字高亮样式 */
    .highlight-text {
        background-color: #ffeb3b;
        color: #ff0000;
        font-weight: bold;
        padding: 1px 2px;
        border-radius: 2px;
    }
</style>